<template>
  <div class="alipay-code-url">
    <div class="code-box">
      <div
        v-show="!isShowCodeMask"
        class="qrcode"
      >
        <canvas id="alipayCode" />
      </div>
      <div
        v-show="isShowCodeMask"
        class="code-mask"
      >
        {{ $t('payment.qrCodeHasExpired') }}
      </div>
      <div class="text">
        {{ $t('allinpay.aliPaySweepPayment2') }}
      </div>
    </div>
    <div class="wx-bg">
      <img
        src="@/assets/images/alipay-bg.png"
        alt
      >
    </div>
  </div>
</template>

<script setup>
import QRCode from 'qrcode'

const props = defineProps({
  isShowCodeMask: {
    type: Boolean,
    default: false
  },
  // eslint-disable-next-line vue/require-default-prop
  alipayCodeUrl: {
    type: String
  }

})
onMounted(() => {
  alipayCode()
})

// 生成支付宝支付二维码
const alipayCode = () => {
  QRCode.toCanvas(document.getElementById('alipayCode'), props.alipayCodeUrl, { version: 6, errorCorrectionLevel: 'L' })
}

</script>
<style lang="scss" scoped>
  .alipay-code-url {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    border-top: 0;
    .code-box {
      margin-right: 100px;
      .qrcode {
        font-size: 0;
        width: 196px;
        height: 196px;
        border: 1px solid #eee;
      }
      .code-mask {
        border: 1px solid #eee;
        background: #eee;
        width: 196px;
        height: 196px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .text {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        margin-top: 10px;
      }
    }
    .wx-bg {
      font-size: 0;
    }
  }
</style>
